import React, { useState } from "react";
import { useDispatch } from "react-redux";

const Form = () => {
  const [value, setValue] = useState("");
  const dispatch = useDispatch();

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  const add = () => {
    // console.log(value);
    if (value) {
      dispatch({
        type: "addAction",
        payload: { id: new Date().getTime(), name: value },
      });
      setValue("");
    }
  };

  const fn = () => {
    // 当dispatch的type在reducer的case没有的时候，就会去找执行sagas的函数
    dispatch({ type: "abc" });
  };

  return (
    <>
      <input type="text" value={value} onChange={handleChange} />
      <button onClick={add}>新增</button>
      <button onClick={fn}>btn</button>
    </>
  );
};

export default Form;
